import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../app_theme.dart';

class RecommendPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _RecommendPageState();
  }
}

class _RecommendPageState extends State<RecommendPage>
    with AutomaticKeepAliveClientMixin {
  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
  List<String> imgs = [
    'assets/img/1.png',
    'assets/img/2.png',
    'assets/img/3.png',
    'assets/img/4.png',
    'assets/img/5.png',
  ];
  RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: AppTheme.nearlyWhite,
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: ClassicHeader(
            textStyle: TextStyle(fontSize: 0),
            spacing: 0,
            iconPos: IconPosition.top,
            completeDuration: const Duration(milliseconds: 150)),
        footer: CustomFooter(
          builder: (BuildContext context, LoadStatus mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body = Text("pull up load");
            } else if (mode == LoadStatus.loading) {
              body = CupertinoActivityIndicator();
            } else if (mode == LoadStatus.failed) {
              body = Text("Load Failed!Click retry!");
            } else if (mode == LoadStatus.canLoading) {
              body = Text("release to load more");
            } else {
              body = Text("No more Data");
            }
            return Container(
              height: 55.0,
              child: Center(child: body),
            );
          },
        ),
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
          itemBuilder: (c, i) => _buildWidget(c, i),
          itemCount: items.length,
        ),
        /*child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 6, 0, 0),
          child: Column(
            children: <Widget>[
              Container(
                height: 180,
                child: new Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return ClipRRect(
                        borderRadius: BorderRadius.circular(6),
                        child: Image.asset(imgs[index], fit: BoxFit.cover));
                  },
                  autoplay: true,
                  itemCount: imgs.length,
                  viewportFraction: 0.95,
                  scale: 0.95,
                ),
              ),
              Container(
                height: 400,
                child: ListView.builder(
                  itemBuilder: (c, i) => Padding(
                      padding: const EdgeInsets.fromLTRB(0, 16, 0, 30),
                      child: Card(
                        child: Center(child: Text(items[i])),
                      )),
                  itemCount: items.length,
                ),
              )
            ],
          ),
        ),*/
      ),
    );
  }

  void _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 1000));
    _refreshController.refreshCompleted();
  }

  void _onLoading() async {
    // monitor network fetch
    await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use loadFailed(),if no data return,use LoadNodata()
    items.add((items.length + 1).toString());
    if (mounted) setState(() {});
    _refreshController.loadComplete();
  }

  @override
  bool get wantKeepAlive => true;

  Widget _buildWidget(BuildContext context, int index) {
    print(index);
    if (index == 0) {
      return Container(
        height: 180,
        child: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return ClipRRect(
                borderRadius: BorderRadius.circular(6),
                child: Image.asset(imgs[index], fit: BoxFit.cover));
          },
          autoplay: true,
          itemCount: imgs.length,
          viewportFraction: 0.95,
          scale: 0.95,
        ),
      );
    }
    return Container(
      height: 100,
      child: Card(child: Center(child: Text(items[index])), color: Colors.red),
    );
  }
}
